const reactive = (obj) => {
  if (typeof obj === 'object') {
    Object.keys(obj).forEach(key => {
      observer(obj,key, obj[key])
    })
  }
}

const observer = (data, key, value) => {
  // if (typeof value === 'object') {
  //   reactive(value)
  //   return
  // }
  reactive(value)
  Object.defineProperty(data, key, {
    get(){
      // console.log('get')
      return value
    },
    set(newVal){
      if (value != newVal) {
        value = newVal
        console.log(`SET key=${key} val=${value}`)
      }
    }
  })
}

const data = {
  a: 1,
  b: 2,
  c: {
    c1: {
      af: 999
    },
    c2: 4
  }
}

reactive(data)

data.a = 5 // SET key=a val=5
data.b = 7 // SET key=b val=7
data.c.c2 = 4 // 不输出
data.c.c1.af = 121 // SET key=af val=123